import React, { Component } from 'react';
import { Row, Button, Col, } from 'antd';
import activeProfile from '../Profile';

import './Order.less';

import ConfigSwitch from '../Component/Order/ConfigSwitch';

export default class Order extends Component {
    onChange(index) {
        // console.log(index);
    }
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    // handle all page value changed
    HandleValueChange(type, control, val) {

        //alert("type " + type + ", " + "control " + control + ", " + " value " + val);
    };

    render() {
        //data format
        let array_data = [
            {
                "model": "区域",
                "type": "location",
                "model_group":
                    [
                        {
                            "type": "choice",
                            "title": "",
                            "btn":
                                [
                                    { "desc": "beijing", "content": "北京HOS" },
                                    { "desc": "qingdao", "content": "青岛HOS" },
                                    { "desc": "guangdong", "content": "广东HOS" }
                                ]
                        },
                        {
                            "type": "select",
                            "title": "",
                            "selectitem":
                                [
                                    { "desc": "random", "content": "随机分配" }
                                ],
                            //"desc_icon":require('../img/service/hulianwang.png')
                            "desc_icon": ""
                        }
                    ]
            },
            {
                "model": "镜像",
                "type": "image",
                "model_group":
                    [
                        {
                            "type": "text",
                            "title": "镜像名称",
                            "content": "Linux CentOS 6.5 64位"
                        },
                        {
                            "type": "text",
                            "title": "版本",
                            "content": "V1.5"
                        }
                    ]
            },
            {
                "model": "实例",
                "type": "case",
                "model_group":
                    [
                        {
                            "type": "select",
                            "title": "云主机",
                            "selectitem":
                                [
                                    { "desc": "type1", "content": "Virtual Machine_2:4核CPU-8G内存-5M宽带-40G系统盘 包月" }
                                ],
                            //"desc_icon":require('../img/service/hulianwang.png')
                            "desc_icon": ""
                        },
                        {
                            "type": "text",
                            "title": "云平台",
                            "content": activeProfile.simpleName + " 平台"
                        }
                    ]
            },
            {
                "model": "网络",
                "type": "internet",
                "model_group":
                    [
                        {
                            "type": "text",
                            "title": "公网带宽",
                            "content": "5M宽带 按月计费"
                        },
                        {
                            "type": "select",
                            "title": "云主机",
                            "selectitem":
                                [
                                    { "desc": "type1", "content": "default-192.168.1.0/24" }
                                ],
                            //"desc_icon":require('../img/service/hulianwang.png')
                            "desc_icon": ""
                        }
                    ]
            },
            {
                "model": "安全",
                "type": "security",
                "model_group":
                    [
                        {
                            "type": "select",
                            "title": "安全组",
                            "selectitem":
                                [
                                    { "desc": "type1", "content": "default" }
                                ],
                            //"desc_icon":require('../img/service/hulianwang.png')
                            "desc_icon": ""
                        }
                    ]
            },
            {
                "model": "服务管理",
                "type": "servicemgn",
                "model_group":
                    [
                        {
                            "type": "text",
                            "title": "软件",
                            "content": activeProfile.simpleName + " 软件 安装"
                        },
                        {
                            "type": "text",
                            "title": "服务",
                            "content": "Linx CentOS 6.5升级服务"
                        }
                    ]
            },
            {
                "model": "购买",
                "type": "buy",
                "model_group":
                    [
                        {
                            "type": "number",
                            "title": "订购数量",
                            "maxval": 10
                        }
                    ]
            }
        ];

        let _this = this;
        return (
            <div className="block-Order">
                <div className="div-nvbar">
                    <Col span={24}>
                        <article>
                            <p><strong>云市场</strong><strong className="strong-arrow">&gt;</strong><strong>大数据</strong><strong className="strong-arrow">&gt;</strong>XXXXX</p>
                        </article>
                    </Col>
                </div>

                <Row className="div-context" >
                    <div className="div-info">
                        <Row className="row-title">
                            <p>当前配置</p>
                        </Row>
                        <Row className="row-tip">
                            <p><strong><img src={require('../img/service/hulianwang.png')} alt="icon" /></strong><strong>请注意按量付费的云服务器不支持备案。</strong></p>
                        </Row>{
                            array_data.map(function (val, index) {
                                return <ConfigSwitch key={index} data={val} valueCallback={_this.HandleValueChange} />
                            })}
                    </div>

                    <div className="div-price">
                        <Row className="row-title">
                            <p>配置费用</p>
                        </Row>
                        <Row className="row-tip">
                            <p className="p-title">配置费用：</p>
                            <p className="p-price"><strong className="strong-price"> ¥</strong><strong className="strong-price">37.80</strong><strong className="strong-month"> / 月</strong></p>
                            <p className="p-tips"><strong>按自然月计费，超出部分按</strong><strong className="strong-price-small">¥ </strong><strong className="strong-price-small">0.80</strong> / 小时计费。</p>
                            <p className="p-tips"><strong><img src={require('../img/service/hulianwang.png')} alt="icon" /></strong><strong>实服务条款</strong><strong className="strong-info">《Helion Marketplace 用户服务协议》</strong></p>
                            <Button className="btn-ok" size="large" type="primary">确认</Button>
                            <p className="p-desc"><strong>实际扣费请以账单为准 </strong><strong className="strong-info">购买和标准计费详情</strong></p>
                        </Row>
                    </div>
                </Row>

                <div className="bottom-space" />
            </div>
        )
    }
}